<html>
	<head>
		<title>Serial Numbers</title>
		<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
		<script>
		function callback(number) {
			if (number == undefined) {
				$("#new").show();
				$("#get_a_number").show();
			}
			else {
				$("#new").hide();
				$("#number").show().text(number);
				$("#get_a_number").show();
			}
		}
		
		$(function(){
		
			// Define AJAX form handlers.
		
			$("#root").submit(function(){
				location.href=($('#id').val());
				return false;
			});

			$("#new_or_next").submit(function(){
				$.post(
					location.pathname + '.js?_=' + (new Date).getTime() + 
						'&callback=callback&',
					$(this).serialize(), 
					callback, 
					'jsonp'
				);
				return false;
			});
			
			$("#error").ajaxError(function(){
				$(this).show()
			})
			
			$("#error").ajaxSuccess(function(){
				$(this).hide()
			})
			
			// Do the onLoad business.

			
			$("#wait").hide();
			if (location.pathname == "/") {
				$("#root").show();
			}
			else {
				$.getScript(location.pathname + '.js')
			}
		});
		</script>
	</head>
	<body>
	
		<div id="wait">
			Please wait.
		</div>
		
		
		<div >
			<!-- If the user got here with "/", get them on the right path. -->
			<form id="root" style="display: none;" action="#" method="get">
				<label for="id">name your sequence</label>
				<input type="text" name="id" id="id"/>
				<input type="submit"/>
			</form>
		</div>
		
		
		<div id="number" style="display: none;">
			<!-- If we've gotten a number, show it. -->
		</div>
		
		
		<form id="new_or_next" action="#" method="post">
			<div id="new" style="display: none;">
				<!-- But, if the ajax call returns nothing, we need to set up a new one. -->
				<div>
					<label for="start">start at</label>
					<input type="text" name="start" id="start" value="1"/>
				</div>
				<div>
					<label for="requester">restrict requester</label>
					<input type="text" name="requester" id="requester"/>
				</div>
				<div>
					<label for="referer">restrict referer</label>
					<input type="text" name="referer" id="referer"/>
				</div>
			</div>
			<div id="get_a_number" style="display: none;">
				<!-- ... same submit to get a new one, either way: -->
				<input type="submit"/>
			</div>
		</form>
		
		<div id="error" style="display: none;">
			Error getting serial number.
		</div>
		
	</body>
</html>